<template>
  <el-container class="infomation">
    <back></back>
    <el-main>
      <div class="form">
        <li>
          <span>用户名</span>
          <p>{{info.shopName1}} <b>(不可修改)</b></p>
        </li>
        <li>
          <span>商户名称</span>
          <p>{{info.shopName2}} <b>(修改请联系管理员)</b></p>
        </li>
        <li>
          <span>商家固话1</span>
          <el-input v-model="changeInfo.fixedLine1" placeholder="请输入固定号码"></el-input>
        </li>
        <li >
          <span>商家固话2</span>
          <el-input v-model="changeInfo.fixedLine2" placeholder="请输入固定号码"></el-input>
        </li>
        <li>
          <span>商家手机1</span>
          <el-input v-model="changeInfo.telephone1" placeholder="请输入手机号码"></el-input>
        </li>
        <li>
          <span>商家手机2</span>
          <el-input v-model="changeInfo.telephone2" placeholder="请输入手机号码"></el-input>
        </li>
        <li>
          <span>经理姓名</span>
          <el-input v-model="changeInfo.managerName" placeholder="请输入经理姓名"></el-input>
        </li>
        <!--<li class="shangjiadizhi">-->
          <!--<span>商家地址</span>-->
          <!--<el-select class="xiala" v-model="provinceId" placeholder="请选择" @change="chooseProvince">-->
            <!--<el-option-->
              <!--v-for="item in provinceList"-->
              <!--:key="item.provinceId"-->
              <!--:label="item.fullName"-->
              <!--:value="item.provinceId">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--<el-select class="xiala" v-model="cityId" placeholder="请选择" @change="chooseCity">-->
            <!--<el-option-->
              <!--v-for="item in cityList"-->
              <!--:key="item.cityId"-->
              <!--:label="item.cityName"-->
              <!--:value="item.cityId">-->
            <!--</el-option>-->
          <!--</el-select>-->

        <!--</li>-->

        <!--详细地址-->
        <li class="xiangxidizhi">
          <span>详细地址</span>
          <el-input type="textarea" v-model="changeInfo.location" placeholder="请输入商家详细地址"></el-input>
        </li>
        <li  v-if="management != ''">已选经营<i style="color: red">(不可修改)</i>
          <p  style="display: flex;width:60%;flex-direction: column;margin-left:15px;">
            <b v-for="(i,k) in management" :key="k" style="color: #2c3e50">{{i.itemName}}</b>
          </p>
        </li>

        <li v-if="isCheckList == 0 && management == '' " class="zhuying" style="border-bottom: none;padding-bottom: 5px">
          <span>商家主营 <i style="color: red">(至少选择一项，提交后不可再修改)</i> </span>
          <p v-for="item in primaryList" :key="item.itemId">
            <span @click="checkBoxList(item.itemId)">
              <b>{{item.itemName}}</b>
              <i class="el-icon-arrow-down" v-if="isItemId != item.itemId"></i>
              <i class="el-icon-arrow-up" v-if="isItemId == item.itemId"></i>
            </span>
            <el-checkbox-group v-model="info.checkList" v-if="isItemId == item.itemId" >
              <el-checkbox  v-for="item in secondList" :label="item.itemId" :key="item.itemId" @change="checkThirdList(item.itemId)">
                  <span>
                    <b>{{item.itemName}}</b>
                    <el-checkbox-group v-model="info.checkThird" v-if="isThird == item.itemId" @change="updateList" >
                        <el-checkbox v-for="i in thirdList "  :key="i.itemId" :label="i.itemId">{{i.itemName}}</el-checkbox>
                    </el-checkbox-group>
                  </span>
                  <!--<el-checkbox v-for="i in thirdList" :key="i.itemId" :label="i.itemName"></el-checkbox>-->
              </el-checkbox>
            </el-checkbox-group>
          </p>
        </li>
        <li v-if="isCheckList == 1 && management == ''"  class="zhuying" style="border-bottom: none;padding-bottom: 5px">
          <span>商家主营 <i style="color: red">(必选,只能选一个)</i> </span>
          <el-radio-group v-model="info.radio" @change="chooseRadio">
            <el-radio v-for="item in secondaryList" :key="item.itemId" :label="item.itemId">
              {{item.itemName}}
            </el-radio>
          </el-radio-group>
        </li>

        <li class="jingyingfanwei" style="padding-top: 0">
          <span>经营范围</span>
          <el-input type="textarea"  v-model="changeInfo.businessScope" placeholder="请填写经营范围"></el-input>
        </li>
        <li  class="shangjiajianjie">
          <span>商家简介</span>
          <el-input type="textarea" v-model="changeInfo.synopsis" :rows="2" placeholder="请填写商家简介"></el-input>
        </li>
        <li  class="lang">
          <span>请上传门店照片</span>
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :limit="10"
            :on-preview="handlePictureCardPreview"
            :http-request="uploadSectionFile"
            :on-exceed="handleExceed"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </li>
        <li  class="lang">
          <span>请上传营业执照照片</span>
          <el-upload
            :http-request="uploadZhiZhao"
            :limit="1"
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview2"
            :on-exceed="handleExceed2"
            :on-remove="handleRemove2"
           >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
        </li>
        <li  class="lang">
          <span>请上传法人身份证正面照</span>
          <el-upload
            :limit="1"
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview3"
            :on-exceed="handleExceed3"
            :on-remove="handleRemove3"
            :http-request="uploadshenfen"
           >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible3">
            <img width="100%" :src="dialogImageUrl3" alt="">
          </el-dialog>
        </li>
        <li  class="lang" style="border: none">
          <span>请上传法人名片照片</span>
          <el-upload
            :limit="1"
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview4"
            :on-exceed="handleExceed4"
            :on-remove="handleRemove4"
            :http-request="uploadmingpian"
           >
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible4">
            <img width="100%" :src="dialogImageUrl4" alt="">
          </el-dialog>
        </li>
        <!--上传店铺产品图片-->
        <li  class="lang" style="border: none">
          <span>请上传店铺产品图片</span>
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview5"
            :on-remove="handleRemove5"
            :http-request="uploaddianpuchanpin"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible5">
            <img width="100%" :src="dialogImageUrl5" alt="">
          </el-dialog>
        </li>


        <li class="submitInfo">
          <el-button class="submitForm" type="danger" @click="submitForm">提交</el-button>
        </li>
      </div>
    </el-main>

  </el-container>
</template>

<script>
  import back from '@/components/back'
  import qs from 'qs'
    export default {
      data() {
        return {
          info: {
            shopName1:'',
            shopName2:'',
              guhua1: '',
              guhua2: '',
              shouji1: '',
              shouji2: '',
              name: '',
              area: [],
              adress: '',
              data:[
              {
                id: 1,
                label: '全车',
                children: [{
                  id: 4,
                  label: '国产',
                  children: [
                    {
                    id: 9,
                    label: '奥迪'
                  },
                    {
                    id: 10,
                    label: '本田'
                  }]
                }]
              }
            ],
              selectedOptions: [],
              radio:'',//单选框组
            checkList:[],//多选框组
            checkThird:[],
            },
          changeInfo:{
            merchantId:'',//商户主键
            fixedLine1:'',//固话1
            fixedLine2:'',
            telephone1:'',//手机1
            telephone2:'',
            managerName:'',//经理名称
            businessScope:'',//主营范围
            synopsis:'',//商户简介
            location:'',//商户地址
          },
          management:'',//用户经营标签
          scope:'',//经营id
          provinceId:'',
          cityId:'',
          provinceList:[],//省份列表
          provinceValue:'',//当前选择省份
          cityList:[],//城市列表
          cityValue:'',//当前选择城市
          ls:false,// 开始时的主营状态，false为没有点击 true点击
          ischeckbox:false,//判断是否是多选
          primaryList:[],//主营汽配
          primaryListChildren:[],
          isItemId:'',
          isCheckList:'',//判断是不是汽配类型 0 是 1 其他
          rollUp:false,//卷起展开开关
          secondList:[],//汽配二级菜单
          thirdList:[],//汽配三级菜单
          isThird:'',
          chooseList:[],//选择的三级类型存储
          newArr:'',//三级类型存储字符串形式
          options:{

          },
          secondaryList:[],//主营其他
          uploadUrl:'/api/front/merchantInfo/upload',//上传图片的远程仓库地址
          fileList:[],//门店上传文件列表
          dialogImageUrl: '',
          dialogVisible: false,
          dialogVisible2:false,
          dialogImageUrl2:"",
          dialogImageUrl3: '',
          dialogVisible3: false,
          dialogImageUrl4: '',
          dialogVisible4: false,
          dialogImageUrl5: '',
          dialogVisible5: false,
          imageUrl: '',//营业执照
          imageShenFenUrl:'',//身份证
          imageMingPianUrl:'',//名片
          shopPhotoId:'',//门店照片id
          otherPhotoId:'',
          userId:'',
        }
      },
      methods:{
        uploadSectionFile(params){
          let form = new FormData();
          form.append('file',params.file);
          form.append('type',0);
          form.append('merchantId',this.userId)
          this.$axios.post(params.action,form)
            .then(res => {
              this.shopPhotoId = res.data.obj.photoId;
            })
        },
        uploadZhiZhao(params){
          let form = new FormData();
          form.append('file',params.file);
          form.append('type',1);
          form.append('merchantId',this.userId)
          let that = this;
          this.$axios.post(params.action,form)
            .then(res => {
              that.otherPhotoId = res.data.obj.photoId;

            })
        },
        uploadshenfen(params){
          let form = new FormData();
          form.append('file',params.file);
          form.append('type',2);
          form.append('merchantId',this.userId)
          let that = this;
          this.$axios.post(params.action,form)
            .then(res => {
              that.otherPhotoId = res.data.obj.photoId;
            })
        },
        uploadmingpian(params){
          let form = new FormData();
          form.append('file',params.file);
          form.append('type',3);
          form.append('merchantId',this.userId)
          let that = this;
          this.$axios.post(params.action,form)
            .then(res => {
              that.otherPhotoId = res.data.obj.photoId;
            })
        },
        uploaddianpuchanpin(params){
          let form = new FormData();
          form.append('file',params.file);
          form.append('type',5);
          form.append('merchantId',this.userId)
          let that = this;
          this.$axios.post(params.action,form)
            .then(res => {
              that.otherPhotoId = res.data.obj.photoId;
            })
        },
        handlePictureCardPreview(file){
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handlePictureCardPreview2(file){
          this.dialogImageUrl2 = file.url;
          this.dialogVisible2 = true;
        },
        handlePictureCardPreview3(file){
          this.dialogImageUrl3 = file.url;
          this.dialogVisible3 = true;
        },
        handlePictureCardPreview4(file){
          this.dialogImageUrl4 = file.url;
          this.dialogVisible4 = true;
        },
        handlePictureCardPreview5(file){
          console.log(file,"点击图片将要删除时");
          this.dialogImageUrl5 = file.url;
          this.dialogVisible5 = true;
        },
        handleRemove(file, fileList) {
          console.log(file,"点击删除");
          let params = {
            photoId:this.shopPhotoId
          }
          this.$axios.post('api/front/merchantInfo/deletePhoto',this.qs.stringify(params))
            .then(res => {
              if(res.data.status == 200){
                this.$message.success(res.data.msg)
              }else {
                this.$message.error(res.data.msg)
              }
            })
        },
        handleRemove2(file, fileList) {
          let params = {
            photoId:this.otherPhotoId
          }
          this.$axios.post('api/front/merchantInfo/deletePhoto',this.qs.stringify(params))
            .then(res => {
              if(res.data.status == 200){
                this.$message.success(res.data.msg)
              }else {
                this.$message.error(res.data.msg)
              }
            })
        },
        handleRemove3(file, fileList) {
          let params = {
            photoId:this.otherPhotoId
          }
          this.$axios.post('api/front/merchantInfo/deletePhoto',this.qs.stringify(params))
            .then(res => {
              if(res.data.status == 200){
                this.$message.success(res.data.msg)
              }else {
                this.$message.error(res.data.msg)
              }
            })
        },
        handleRemove4(file, fileList) {
          let params = {
            photoId:this.otherPhotoId
          }
          this.$axios.post('api/front/merchantInfo/deletePhoto',this.qs.stringify(params))
            .then(res => {
              if(res.data.status == 200){
                this.$message.success(res.data.msg)
              }else {
                this.$message.error(res.data.msg)
              }
            })
        },
        handleRemove5(file, fileList) {
          let params = {
            photoId:this.otherPhotoId
          }
          this.$axios.post('api/front/merchantInfo/deletePhoto',this.qs.stringify(params))
            .then(res => {
              if(res.data.status == 200){
                this.$message.success(res.data.msg)
              }else {
                this.$message.error(res.data.msg)
              }
            })
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择10个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleExceed2(files, fileList) {
          this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleExceed3(files, fileList) {
          this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleExceed4(files, fileList) {
          this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleChange(file,fileList) {

        },
        handleAvatarSuccess(res, file) {

          this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        handleNodeClick(data,checked,indeterminate) {

        },
        // chooseProvince(val){
        //   let params = {
        //     provinceId:val
        //   }
        //   this.$axios.post('/api/front/city/listByProId',this.qs.stringify(params))
        //     .then(res => {
        //       this.cityList = res.data.obj.list;
        //       console.log(this.cityList)
        //     })
        // },
        chooseRadio(val){
          this.ls = true;
          this.info.radio = val;
          this.scope = this.info.radio.toString()
        },
        checkBoxList(val){
          let params = {
            itemId:val,
            levelId:2
          };
          this.$axios.post('/api/front/item/list',this.qs.stringify(params))
              .then(res => {
                this.secondList = res.data.obj;
                console.log(this.secondList)
              })
          this.isItemId = val;
          // if(this.rollUp == false){
          //   this.isItemId = val;
          //   console.log(this.isItemId)
          //   this.rollUp = true;
          //   this.$axios.post('/api/front/item/list',this.qs.stringify(params))
          //     .then(res => {
          //       this.secondList = res.data.obj;
          //       console.log(this.secondList)
          //     })
          // }else{
          //   this.isItemId = null;
          //   this.rollUp = true;
          // }

        },
        checkThirdList(val){
          this.isThird = val
          let params = {
            itemId:val,
            levelId:3
          }
          this.$axios.post('/api/front/item/list',this.qs.stringify(params))
            .then(res => {
              this.thirdList = res.data.obj;
            })
        },
        updateList(val){
          this.chooseList = val;
          this.ls = true;
          this.scope = this.chooseList.toString()
        },
        // chooseCity(val){
        //   this.changeInfo.loation = val;
        // },
        submitForm(){
          let that = this;
          let params = {
            merchantId:this.userId,
            range:this.scope
          };
          if(this.ls == false){
            this.$message.warning('请选择主营产品')
          }else {
            this.$axios.post('api/front/merchantInfo/update',this.qs.stringify(this.changeInfo))
              .then(res => {
                if(res.data.status != 200){
                  this.$message.error(res.data.msg);
                }else {
                  this.$message.success(res.data.msg);
                  this.$router.push("/indexs");
                }
              })

            if(this.management != ''){

            return;
            }
              this.$axios.post('/api/front/merchantInfo/update_scope',this.qs.stringify(params))
                .then(res => {
                  if(res.data.status == 200){
                    this.$message.success('用户信息已更新')
                    this.$router.push('/indexs')
                  }else {
                    this.$message.error(res.data.msg)
                  }
                })







          }
        }
      },
      created(){
        this.userId = localStorage.getItem("merchantId");
        let params = {
          merchantId:this.userId
        }

        // this.$axios.post('/api/front/province/all')
        //   .then(res=>{
        //     this.provinceList = res.data.obj
        //   })

          this.$axios.post('api/front/merchantInfo/detail',this.qs.stringify(params))
            .then(res => {

              this.info.shopName1 = res.data.obj.userName
              this.info.shopName2 = res.data.obj.merchantName;
              this.changeInfo.fixedLine1 = res.data.obj.fixedLine1;
              this.changeInfo.fixedLine2 = res.data.obj.fixedLine2;
              this.changeInfo.telephone1 = res.data.obj.telephone1;
              this.changeInfo.telephone2 = res.data.obj.telephone2;
              this.changeInfo.managerName = res.data.obj.managerName;
              this.changeInfo.businessScope = res.data.obj.businessScope;
              this.changeInfo.synopsis = res.data.obj.synopsis;
              this.changeInfo.location = res.data.obj.location;
              this.province = res.data.obj.province;
              this.city = res.data.obj.city;
            })
        //根据商户查询经营标签

          this.$axios.post('api/front/item/listItemName',this.qs.stringify({
            merchantId:localStorage.getItem('merchantId')
          })).then(res => {
            if(res.data.status != 200){
              this.management = ''
            }else {
              this.management = res.data.obj;
              this.ls = true;

            }

          })


      },
      computed:{
        userId(){
          return this.$store.state.merchantId
        }
      },
      mounted(){
        this.changeInfo.merchantId = this.userId
        this.isCheckList = localStorage.getItem('majorType');
        let that = this;
        let params = {
          majorType:localStorage.getItem('marjorType')
        }
        this.$axios.post('/api/front/item/top')
          .then(res => {
             that.primaryList = res.data.obj.primary;
             that.secondaryList = res.data.obj.secondary;
          })
      },
      components:{
        back,
      }
    }
</script>

<style scoped lang="scss">
.el-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .el-main{
    background: #fff;
    .form{
      li{
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #f2f2f2;
        padding: 10px 15px;
        span{
          font-size: 16px;
          width: 100px;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        p{
          margin: 0;

          font-size: 14px;
          b{
            color: red;
          }
        }
        .el-input{
          width: auto;
        }
        &.shangjiadizhi{
          padding: 15px;
          border-bottom: none;
          .el-cascader{
            width: auto;
          }
        }
        &.xiangxidizhi{
          padding: 15px;
          span{
            display: inline-block;
            padding-top: 10px;
          }
        }
        &.jingyingfanwei{
          span{
            display: inline-block;
            padding-top: 10px;
          }
        }
        &.shangjiajianjie{
          padding: 20px 15px;
          span{
            display: inline-block;
            padding-top: 10px;
          }
        }

        &.lang{
          display: flex;
          flex-direction: column;
          padding: 20px 15px;
          span{
            width: 100%;
            margin-bottom: 15px;
          }

        }
        &.zhuying{
          padding: 20px 15px;
          display: flex;
          flex-direction: column;
          span{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: flex-start;
            margin-bottom: 15px;
            i{
              padding-left: 15px;
            }
          }
          p{
            /*position: relative;*/
            span{
              color: #c0ccda;
              b{
                color: #666;
              }
              i{
                display: flex;
                flex-direction: column;
                justify-content: center;
              }
            }
            .el-checkbox-group{
              display: flex;
              flex-direction: column;
              width: 100%;
              text-align: left;
              .el-checkbox{
                padding: 2px 0;
                &:nth-child(1){
                  margin-left: 30px;
                }
              }
            }
          }
        }
        &.submitInfo{
          padding: 0;
          margin: 20px 0;
          border: none;
          margin-bottom: 100px;
          .el-button{
            width: 70%;
          }
        }
      }

    }
  }

}
</style>
